<template>
  <div style="text-align: left; margin-left: 100px">
    <div style="text-align: left">
      <span>题型：</span>
      <el-radio-group
        v-model="alldate.quTypeId"
        @change="agreeChange"
        style="margin-left: 60px"
      >
        <el-radio :label="1">单选题</el-radio>
        <el-radio :label="2">多选题</el-radio>
        <el-radio :label="3">判断题</el-radio>
        <el-radio :label="4">填空题</el-radio>
        <el-radio :label="5">问答题</el-radio>
      </el-radio-group>

      <br />
      <br />
      <br />
      <span>题干：</span>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="alldate.title"
        size="mini"
        style="width: 650px; margin-left: 51px"
      >
      </el-input>
      <br />
      <br />
      <br />
      <div v-if="showPrise">
        <div style="display: flex">
          <span style="margin-top: 12px">选项及内容：</span>
          <div>
            <el-table
              :data="alldate.choiceAnswerLists"
              style="width: 650px"
              max-height="250"
            >
              <el-table-column fixed prop="options" label="选项" width="150">
              </el-table-column>
              <el-table-column
                prop="optionContent"
                label="选项内容"
                width="300px"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.optionContent"></el-input>
                </template>
              </el-table-column>

              <el-table-column scope="scope" label="答案" width="50">
                <template slot-scope="scope">
                  <el-checkbox
                    @change="addAnswer(scope.$index, scope.row)"
                    :checked="ischecked"
                  >
                  </el-checkbox>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="
                      deleteRow(scope.$index, alldate.choiceAnswerLists)
                    "
                    type="text"
                    size="small"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-row>
          <el-button
            style="width: 650px; margin-left: 95px"
            @click="addchoice()" v-if="showAddOne1"
            >添加选项</el-button
          >
        </el-row>
      </div>
      <br />
      <div v-show="showAnswer">
        <span>答案：</span>
        <el-input
          v-model="alldate.answer"
          placeholder="请输入内容"
          style="width: 650px; margin-left: 51px"
        ></el-input>
      </div>
      <br />
      <span>答案解析：</span>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="alldate.analysis"
        size="mini"
        style="width: 650px; margin-left: 15px"
      >
      </el-input>

      <br />
      <br />
      <br />
      <span>所属类别：</span>
      <el-select
        v-model="alldate.titlecategoryId"
        style="width: 650px; margin-left: 15px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <br />
      <br />

      <div style="text-align: left; margin: 0 auto">
        <span>题目难度：</span>
        <el-radio-group v-model="alldate.complexity" style="margin-left: 20px">
          <el-radio :label="1">简单</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">困难</el-radio>
        </el-radio-group>
      </div>
      <br />

      <el-row style="margin-left: 60px">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="addOne()" v-text="saveOrUpdate"
          >保存</el-button
        >
        <el-button type="success" @click="addOne1()" v-if="showAddOne1"
          >保存并添加下一个</el-button
        >
      </el-row>
    </div>
  </div>
</template>


<script>
import answerVue from "../student/answer.vue";
var i = 4;

export default {
  data() {
    return {
      saveOrUpdate: "1",
      showAddOne1: true,
      showAnswer: false,
      showPrise: true,
      checkedAnswer: [],
      ischecked: false,
      alldate: {
        title: "",
        answer: "",
        analysis: "",
        complexity: "",
        titlecategoryId: "",
        quTypeId: "",
        choiceAnswerLists: [
          {
            options: "A",
            optionContent: "",
          },
          {
            options: "B",
            optionContent: "",
          },
          {
            options: "C",
            optionContent: "",
          },
          {
            options: "D",
            optionContent: "",
          },
        ],
      },
      xuanxiang: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"],
      options: [
        {
          id: "1",
          name: "",
        },
        {
          id: "2",
          name: "",
        },
      ],
      value: "",
    };
  },

  //钩子函数 在组件第一次渲染的时候才执行
  created() {
    // console.log(data);
    if (this.$route.params.type == 2) {
      if(this.$route.params.s.quTypeId==3 || this.$route.params.s.quTypeId==4||this.$route.params.s.quTypeId==5){
        this.showAnswer=true;
        this.showPrise=false;
      }else{
        this.showAnswer=false;
        this.showPrise=true;
      }
      this.saveOrUpdate = "修改";
      // this.$refs.btn1.$el.innerText = this.saveOrUpdate;
      this.showAddOne1 = false;
      console.log("aa",this.$route.params.s);
      this.alldate = this.$route.params.s;
    } else if (this.$route.params.type == 1) {
      this.saveOrUpdate = "保存";
      this.showAddOne1 = true;
    }
    this.findCategory();
  },
  methods: {
    agreeChange: function () {
      if (
        this.alldate.quTypeId === 3 ||
        this.alldate.quTypeId === 4 ||
        this.alldate.quTypeId === 5
      ) {
        this.showPrise = false;
        this.showAnswer = true;
      } else {
        this.showPrise = true;
        this.showAnswer = false;
      }
    },
    // this.tableData = res.data.data.list;
    findCategory() {
      this.$axios
        .get("api/examMenu/findCategory")
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.options = res.data.data;
            console.log(this.options);
          } else {
          }
        })
        .catch();
    },
    //勾选选项【做复杂了 不想改了】
    addAnswer: function (index, row) {
      if (this.ischecked == false) {
        this.ischecked = true;

        if (this.alldate.answer.includes(row.options)) {
          this.alldate.answer = this.alldate.answer.replace(row.options, "");
          console.log(this.alldate.answer);
        } else {
          this.alldate.answer += row.options;
          console.log(this.alldate.answer);
        }
      } else {
        this.ischecked = false;
        if (this.alldate.answer.includes(row.options)) {
          this.alldate.answer = this.alldate.answer.replace(row.options, "");
          console.log(this.alldate.answer);
        } else {
          this.alldate.answer += row.options;

          console.log(this.alldate.answer);
        }
      }
    },
    //取消保存 返回界面
    cancel() {
      this.$router.push({ path: "/answerDescription" });
    },
    deleteRow(index, rows) {
      i--;
      rows.splice(index, 1);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    addchoice() {
      this.alldate.choiceAnswerLists.push({
        options: this.xuanxiang[i++],
        optionContent: "",
      });
    },
    //添加一个题目
    addOne() {
      if (this.$route.params.type == 1) {
        this.$axios
          .post("api/question/addQuestionOne", this.alldate)
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.push({ path: "/answerDescription" });
              this.$message({
                message: res.data.message,
                type: "success",
              });
              //关闭弹窗
              // this.dialogFormVisible1 = false;
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch();
      }else if(this.$route.params.type == 2){
         this.$axios
          .put("api/question/updateQuestion", this.alldate)
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.push({ path: "/answerDescription" });
              this.$message({
                message: res.data.message,
                type: "success",
              });
              //关闭弹窗
              // this.dialogFormVisible1 = false;
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch();
      }
    },

    //添加一个题目并重置
    addOne1() {
      this.$axios
        .post("api/question/addQuestionOne", this.alldate)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.alldate = {
              title: "",
              answer: "",
              analysis: "",
              complexity: "",
              titlecategoryId: "",
              quTypeId: "",
              choiceAnswerLists: [
                {
                  options: "A",
                  optionContent: "",
                },
                {
                  options: "B",
                  optionContent: "",
                },
                {
                  options: "C",
                  optionContent: "",
                },
                {
                  options: "D",
                  optionContent: "",
                },
              ],
            };
            this.$message({
              message: res.data.message,
              type: "success",
            });
            //关闭弹窗
            // this.dialogFormVisible1 = false;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch();
    },
  },
  components: {},
};
</script>
